//返回主页
let back = document.querySelector(".back")
back.onclick = function () {
    location.href = "http://127.0.0.1:5500/home-of-e-commerce/src/pages/index.html"
}

fetch("http://chst.vip:1234/api/getbaicaijiatitle?pageid=1")
    .then(body => body.json())
    .then(res => {
        //console.log(res)
        let html = "";
        
        res.result.forEach(item => {
            
            html += `
            <li titleId="${item.titleId}">
                ${item.title}
            </li>
            `
            // query=`?titleid=${item.titleId}`
        })
        
        let uu = document.querySelector("#uu")
        uu.innerHTML = html

        let lis = document.querySelectorAll('li');
        let body = document.querySelector("body")

        //uu拖拽功能
        uu.style.width = lis.length * 1.87 + "rem"
        
        // let startX = 0;
        // let endX = 0;
        // //let diff = 0;
        // let s = 0
        // //console.log(uu)
        // uu.addEventListener('touchstart', function (e) {
        //     let touch = e.targetTouches[0]
        //     //console.log(123)
        //     startX = touch.pageX;
        //     //console.log(touch.pageX)
        // })
        // uu.addEventListener('touchmove', function (e) {
        //     let touch = e.targetTouches[0]
        //     endX = touch.pageX
        //     let diff = endX - startX
        //     uu.style.left = diff / 37.5 + "rem"
            
        // })
        
        

        // uu.addEventListener('touchend', function (e) {
        //     let touch = e.targetTouches[0]
        //     let diff = endX - startX
        //     diff = parseInt(diff)

        //     uu.style.left = diff / 37.5 + "rem"
        // })


        // uu.ontouchstart = function () {
        //     document.ontouchmove = function (move) {

        //         console.log(move.pageX)

        //         // let x = e.pageX
        //         // console.log (13)
        //         // let diff = x-uu.offsetX
        //         // let xmax = (lis.length - 5) * 1.87
        //         // if (diff < 0) {
        //         //     diff = 0
        //         // }
        //         // if (diff >xmax ){
        //         //     diff = xmax
        //         // }
        //         // uu.style.left = diff +"rem"
        //     }
        // }

        let titleId = 0
        Array.from(lis).forEach(li => {
            
            li.onclick = function () {
                let titleId = this.getAttribute("titleId")
                //console.log(titleId)

                fetch("http://chst.vip:1234/api/getbaicaijiaproduct?titleid=" + titleId)
                    .then(body => body.json())
                    .then(res => {
                        //console.log(res)
                        let infoLiHtml = ""
                        res.result.forEach(item => {
                            infoLiHtml += `
                            <li>
                            <a href>
                                <div class="img fl">${item.productImg}</div>
                                <div class="infoR">
                                    <div class="title">
                                        <h4>
                                        <span class="b">
                                        [包邮]
                                        </span>
                                        双十一红包 今日开启
                                        </h4>
                                        <div class="price">${item.productPrice}
                                        <del>1888.0</del>
                                        </div>
                                    </div>
                                    <div class="down">
                                        <div class="bar">
                                        <div class="bar_in" style = "width:0rem">0%</div>
                                        </div>
                                        <span class="yiling">已领0/剩余72</span>
                                    <div class="click">
                                        <div class="left">点此领取优惠券</div>
                                        <div class="right">下单链接</div>
                                </div>
                                    </div>
                                </div>
                            </a>
                        </li>
                    `
                        })
                        let info = document.querySelector(".info")
                        info.innerHTML = infoLiHtml
                    })

            }
            
        })
        
        fetch("http://chst.vip:1234/api/getbaicaijiaproduct?titleid=" + titleId)
        .then(body => body.json())
        .then(res => {
            //console.log(res)
            let infoLiHtml = ""
            res.result.forEach(item => {
                // let percent = 0;
                // let length = 0
                // setInterval((percent, length) => {
                //     //percent 0 =>100
                //     //length 0 =>3.2rem
                //     //num1   0=>126
                //     //num2   126=>0
                //     percent += 1
                //     length += 0.032
                //     if(percent=100){
                //         clearInterval
                //     }
                // }, 30);

                // setInterval((num1=0,num2=126) => {
                //     // let num1 = 0
                //     // let num2 = 126
                //     num1 += 1
                //     num2 -= 1
                //     if(num1=126){
                //         clearInterval
                //     }
                //     console.log(num1)
                // }, 3000);


                infoLiHtml += `
            <li>
            <a href>
                <div class="img fl">${item.productImg}</div>
                <div class="infoR">
                    <div class="title">
                        <h4>
                        <span class="b">
                        [包邮]
                        </span>
                        双十一红包 今日开启
                        </h4>
                        <div class="price">${item.productPrice}
                        <del>1888.0</del>
                        </div>
                    </div>
                    <div class="down">
                        <div class="bar">
                        <div class="bar_in" style = "width:0rem">0%</div>
                        </div>
                        <span class="yiling">已领0张/剩余126张</span>
                    <div class="click">
                        <div class="left">点此领取优惠券</div>
                        <div class="right">下单链接</div>
                </div>
                    </div>
                </div>
            </a>
        </li>
        `
            })
            let info = document.querySelector(".info")
            info.innerHTML = infoLiHtml
            //动画效果
            let bar_ins = document.querySelectorAll('.bar_in')
            let yilings = document.querySelectorAll('.yiling')

            //console.log(bar_in)
            Array.from(bar_ins).forEach(item => {
                $(item).animate({ width: "3.2rem" }, 3000)
                //console.log(item.innerText)
                let t = 0
                let timer = setInterval(() => {
                    t++
                    item.innerHTML = t + "%"
                    //console.log(t)
                    if (t >= 100) {
                        clearInterval(timer)
                    }
                }, 30);

            })
            Array.from(yilings).forEach(item => {
                let num1 = 0
                let num2 = 126
                let timer2 = setInterval(() => {
                    num1++
                    num2--
                    item.innerHTML = `已领${num1}张/剩余${num2}张`
                    if (num1 >= 126) {
                        clearInterval(timer2)
                    }
                }, 23)
            })

        })


    })

